<template>
	<IsGuest>
		<div class="p-4">
			<h1 class="text-title mb-4">UnoCSS 预加载策略测试</h1>

			<div class="card mb-4">
				<h2 class="text-subtitle mb-2">预加载关键CSS测试</h2>
				<div class="flex-center space-x-4">
					<div class="bg-white p-4 rounded shadow">预加载卡片</div>
					<div class="bg-gray-100 p-4 rounded border">预加载边框</div>
				</div>
			</div>

			<div class="card mb-4">
				<h2 class="text-subtitle mb-2">快捷方式测试</h2>
				<div class="flex space-x-2">
					<button class="btn-primary">主要按钮</button>
					<button class="btn-secondary">次要按钮</button>
				</div>
			</div>

			<div class="card mb-4">
				<h2 class="text-subtitle mb-2">属性化模式测试</h2>
				<div bg="blue-100" p="4" rounded="lg" text="blue-800 center">属性化模式示例</div>
			</div>

			<div class="card mb-4">
				<h2 class="text-subtitle mb-2">响应式测试</h2>
				<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
					<div class="w-full md:w-1/2 bg-green-100 p-2 rounded">响应式列1</div>
					<div class="w-full md:w-1/2 bg-green-200 p-2 rounded">响应式列2</div>
				</div>
			</div>

			<div class="card">
				<h2 class="text-subtitle mb-2">图标测试</h2>
				<div class="flex-center space-x-4">
					<div class="i-mdi:home text-2xl text-blue-600"></div>
					<div class="i-mdi:account text-2xl text-green-600"></div>
					<div class="i-mdi:settings text-2xl text-red-600"></div>
				</div>
			</div>
		</div>
	</IsGuest>
</template>

<script lang="ts">
export default {
	name: 'UnoCSSTest'
}
</script>

<style scoped>
/* 这里可以测试 @apply 指令 */
.test-apply {
	@apply bg-yellow-100 p-4 rounded border border-yellow-300;
}
</style>
